<template>
  <div>
    <div class="permissManaTool">
      <el-input placeholder="请输入英文名" v-model="role.name" @keydown.enter.native="addRole">
        <template slot="prepend">ROLE_</template>
      </el-input>
      <el-input placeholder="请输入中文名" v-model="role.nameZh" @keydown.enter.native="addRole"></el-input>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="addRole">添加角色</el-button>
    </div>

    <div class="permissManaMain">
      <el-collapse v-model="activeName" accordion  @change="getMenus">
        <el-collapse-item
          :title="r.nameZh"
          :name="r.id"
          v-for="(r,index) in roles"
          :key="index"
        >
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>可访问资源</span>
              <el-button style="float: right; padding: 3px 0; color: #ff0000" type="text"
                         icon="el-icon-delete" @click="deleteRole(r.id,r.nameZh)"></el-button>
            </div>
            <div>
              <el-tree
                ref="tree"
                :data="menuData"
                :props="defaultProps"
                show-checkbox
                :default-checked-keys="selectedMenus"
                node-key="id"
              ></el-tree>
              <div style="display: flex;justify-content: flex-end;margin-top: 10px">
                <el-button size="mini" @click="cancelUpdate(r.id)">取消修改</el-button>
                <el-button type="primary" size="mini" @click="update(r.id,index)">确认修改</el-button>
              </div>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>

</template>

<script>
import permissAPI from "@/api/permiss";
export default {
name: "permissMan",
  data(){
    return {
      role:{
        name:'',
        nameZh:''
      },
      roles:[],
      menuData:[],
      defaultProps:{
        children: 'children',
        label: 'name',
      },
      selectedMenus:[],
      activeName:-1,

    }
  },
  methods:{
    //删除角色
    deleteRole(rid,rname){

      this.$confirm('此操作将永久删除['+rname+']职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除操作
        permissAPI.deleteRole(rid).then(res => {
          if (res){
            console.log(res);
            this.getRoles(); // 初始化角色菜单
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });



    },
    // 添加角色
    addRole(){
      // 英文名与中文名都要有
      if (this.role.name && this.role.nameZh){
        permissAPI.addRole(this.role).then(res => {
          if (res) {
            console.log(res);
            this.role.nameZh = ''
            this.role.name = ''
            this.getRoles();
          }else{
            this.$message.error("出现了点问题，请稍后再试")
          }
        })
      }else {
        this.$message.warning('所有字段不能为空')
      }
    },
    // 获取所有角色
    getRoles(){
      permissAPI.getRoles().then((res) => {
        console.log(res);
        if (res) {
          this.roles = res.data
        }
      })
    },
    // 获取所有菜单
    getMenus(rid){
      if (rid) {
        this.initMenus()
        this.initSelectedMenus(rid);
      }
    },
    initSelectedMenus(rid){
      permissAPI.getMenuByRid(rid).then(res =>{
        if (res){
          this.selectedMenus = res.data;
          console.log(res);
        }
      })
    },
    initMenus(){
      permissAPI.getMenuData().then((res) => {
        this.menuData = res.data
      })
    },
    update(rid,index){
      let selectedTree = this.$refs.tree[index].getCheckedKeys(true); // true表示只打印叶子结点id
      permissAPI.updateMenuRole(rid, selectedTree).then(res => {
        if (res) {
          console.log(res);
          this.getRoles();
          this.activeName = -1;
        }
      });
      console.log(selectedTree);
    },
    cancelUpdate(rid){
      // this.getRoles();
      this.getMenus(rid)
      this.activeName = -1;
    }

  },

  created() {
    console.log("权限组");
    this.getRoles();
  }
}
</script>

<style scoped>
 .permissManaTool{
   display: flex;
   justify-content: flex-start;
 }
 .permissManaTool .el-input {
   width: 300px;
   margin-right: 10px;
 }
 .permissManaMain {
   width: 700px;
   margin-top: 30px;
 }
</style>
